let x = <div className="container" className2="container2" className3="container3" onClick />
let x = <Foo className="container" />
let x = <Foo.Bar className="container" />
let x = <Foo.Bar.Baz className="container" />
let x = <Foo.bar className="container" />
let x = <Foo.baz
 className="multiline"
/>
let x = <custom-tag className="container" />
let x = <Foo.custom-tag className="container" />

// https://github.com/rescript-lang/syntax/issues/570
let x = <A> <B> <C> <D /> <E /> </C> <F> <G /> <H /> </F> </B> </A>
let x = <A> {children} <B/> </A>
let x = <A> <B/> {children} </A>
let x = <A> {a} </A>
let x = <A> {a} {b} </A>
let x = <custom-tag className="container" > {a} <B/> </custom-tag>
let x = <Foo.custom-tag className="container" > {a} <B/> </Foo.custom-tag>

let x =
  <div
  className="container" className2="container2" className3="container3" onClick
  />


let nav = <Nav isMobile={isMobile} fullScreen={!isMobile ? false : isOpen}>
      <NavContent>
        <WidescreenMenu
          menuItems={props.items}
          trial={props.trial}
          user={props.user}
          viewer={props.viewer}
        />
      </NavContent>
    </Nav>

let nav2 =
  <Nav isMobile={isMobile} fullScreen={!isMobile ? false : isOpen}>
    <NavContent>
      {switch isMobile {
      | true =>  (
        <MobileMenu
          handleOpenToggle={_ => setOpen(open_ => !open_)}
          menuItems={props.items}
          isOpen={isOpen}
          forceOpen={_ => setOpen(true)}
          forceClose={_ => setOpen(false)}
          user={props.user}
        />
      ) 
      | false => (
        <WidescreenMenu
          menuItems={props.items}
          trial={props.trial}
          user={props.user}
          viewer={props.viewer}
        />
      )}}
    </NavContent>
  </Nav>

let nav3 = (
  <Nav isMobile={isMobile} fullScreen={!isMobile ? false : isOpen}>
    <NavContent>
      {isMobile ? (
        <MobileMenu
          handleOpenToggle={_ => setOpen(open_ => !open_)}
          menuItems={props.items}
          isOpen={isOpen}
          forceOpen={_ => setOpen(true)}
          forceClose={_ => setOpen(false)}
          user={props.user}
        />
      ) : (
        <WidescreenMenu
          menuItems={props.items}
          trial={props.trial}
          user={props.user}
          viewer={props.viewer}
        />
      )}
    </NavContent>
  </Nav>
)

let avatarSection = (
    <>
      <div style={{"zIndex": "1", "opacity": opacityUser}}>
        <Avatar user={user} size={45} />
      </div>
      {user.email !== viewer.email ? (
        <div
          style={{
            "marginLeft": marginLeft + "em",
            "opacity": opacityAdmin,
            "zIndex": "0",
            "cursor": "pointer"
          }}
          onMouseEnter={_ => setHoveringAdmin(true)}
          onMouseLeave={_ => setHoveringAdmin(false)}
          onClick={_e => {
            stopImpersonating(csrfToken);
          }}
        >
          <Avatar user={viewer} size={45} />
        </div>
      ) : React.nullElement}
    </>
  );

let x = <> </>;

let x =
  <div
    ident // punned
    ?ident // punned optional
    ident=?identifierExpr 
    ident=identifierExpr
    constant="constant"
    letExpr={
      let a = 1
      let b = 2
      a + b
    }
    onClick={event => handleClick(event)}
    onClick={(event1, event2, event3) => {
      Js.log("debug click")
      handleClick(event)
    }}
    onClick={(aaaaaaaaaaaaaaarg1, aaaaaaaaaaaaaaaaaaaaaaarg2, aaaaaaaaaaaaaaarg3) => {
      sideEffect(aaaaaaaaaaaaaaarg1)
      sideEffect(aaaaaaaaaaaaaaaaaaaaaaarg2)
      sideEffect(aaaaaaaaaaaaaaarg3)
    }}
    apply={myFunction(x)}
    applyWithDot={myFunction(. x)}
    street={streets[0]}
    binary={a + b}
    int={-1}
    float={-1.2}
    matchExpression={switch color {
      | Blue => "blue"
      | Red => "red"
    }}
    tryExpression={try sideEffect() catch {
      | Error => ()
    }}
    tuple=(a, b, c)
    constr=Rgb(red, blue, green)
    list1=list{}
    list2=list{a, b}
    list3=list{a, b, ...x}
    array=[a, b, c]
    record={x: 1, y: 2}
    field=foo.bar
    setField={user.name = "Steve"}
    ifThenElse={if true {
      ()
    } else {
      ()
    }}
    seq={{sideEffect1(); sideEffect2()}}
    whileExpr={while true {
      loop()
    }}
    forExpr={for i in 0 to 10 {
      do(i)
    }}
    constraintExpr={(20: int)}
    letModule={{
      module L = Log;
      L.log()
    }}
    letException={{
      exception Exit;
      throw(Exit)
    }}
    assertExpr={assert(true)}
    pack=module(Foo)
    pack={module(Foo)}
    pack=module(Foo: Bar)
    pack={module(Foo: Bar)}
    openExpr={open React; React.render()}
    extension=%raw("eval()")
    jsObject={"x": 1, "y": 2} 
    withAttr={@attr foo}
 />

  let x = <div>
    ident "constant"
    {
      let a = 1
      let b = 2
      a + b
    }
    {event => handleClick(event)}
    {(event1, event2, event3) => {
      Js.log("debug click")
      handleClick(event)
    }}
    {(aaaaaaaaaaaaaaarg1, aaaaaaaaaaaaaaaaaaaaaaarg2, aaaaaaaaaaaaaaarg3) => {
      sideEffect(aaaaaaaaaaaaaaarg1)
      sideEffect(aaaaaaaaaaaaaaaaaaaaaaarg2)
      sideEffect(aaaaaaaaaaaaaaarg3)
    }}
    {myFunction(x)}
    {myFunction(. x)}
    {streets[0]}
    {a + b}
    {-1}
    {-1.2}
    {switch color {
      | Blue => "blue"
      | Red => "red"
    }}
    {try sideEffect() catch {
      | Error => ()
    }}
    {(a, b, c)}
    Rgb(red, blue, green)
    list{}
    list{a, b}
    list{a, b, ...x}
    [a, b, c]
    {x: 1, y: 2}
    foo.bar
    {user.name = "Steve"}
    {if true {
      ()
    } else {
      ()
    }}
    {{sideEffect1(); sideEffect2()}}
    {while true {
      loop()
    }}
    {for i in 0 to 10 {
      do(i)
    }}
    {(20: int)}
    {{
      module L = Log;
      L.log()
    }}
    {{
      exception Exit;
      throw(Exit)
    }}
    {assert(true)}
    {module(Foo)}
    module(Foo)
    {module(Foo: Bar)}
    module(Foo: Bar)
    {open React; React.render()}
    %raw("eval()")
    {"x": 1, "y": 2} 
    {@attr ident} 
  </div>

let x = <MyComponent sidebar=<div> test </div> nav=<Navbar /> />

<div>
  {possibleGradeValues
  ->List.filter(g => g <= state.maxGrade)
  ->List.map(possibleGradeValue =>
      <option
        key={possibleGradeValue->string_of_int}
        value={possibleGradeValue->string_of_int}>
        {possibleGradeValue->string_of_int->str}
      </option>
    )
  ->Array.of_list
  ->ReasonReact.array}
</div>

// https://github.com/rescript-lang/syntax/issues/113
<div>  {Js.log(a <= 10)} </div>
<div> <div> {Js.log(a <= 10)} </div> </div>
<div> <div onClick={_ => Js.log(a <= 10) }> <div> {Js.log(a <= 10)} </div> </div> </div>

module App = {
  @react.component
  let make = () => {
    <> 1 </>
  }
}

module App = {
  @react.component
  let make = () => {
    <> <div /> </>
  }
}

// leading line comment on rhs jsx prop should indent nicely
<ContributorsRow
  amount={
    // ->BN.new_("86400")
    // There are 86400 seconds in a day.
    amount->BN.div(BN.new_("86400"))->BN.toString
  }
/>

// leading line comment on rhs jsx prop should indent nicely
<ContributorsRow
  amount={
    // There are 86400 seconds in a day.
    compute(amount)
  }
/>

// leading line comment on braced children should indent nicely
<div>
  {// comment
    content
  }

  { // comment
    if condition() {
      renderBranch()
    } else {
      doSomeOtherThings()
    }
  }
</div>


let x = <A x="y" {...str} />

// https://github.com/rescript-lang/rescript-compiler/issues/6002
let x = props =>
  <A
    {...props}
    className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight"
  />

let x = {
  let _ = <div />
  msg->React.string
}

let x = {
  let _ = <div> {children} </div>
  msg->React.string
}

let x = {
  let _ = <> {children} </>
  msg->React.string
}

let x = {
  let _ = <C />
  msg->React.string
}

let x = {
  let _ = <C> {children} </C>
  msg->React.string
}

let x =
  <div>
    {
      hello()
      hello()
    } 
    {
      world()
      world()
    }

    {
      hello()
      hello()
    } {
      world()
      world()
    }
    // another test
    <span
      id="1"
      className="sdf sdfdsf sdfs sdf asdf dsf"
      onClick={() => {
        ()
      }}
    />

    // Comment 2

    <span
      id="2"
      className="sdf sdfdsf sdfs sdf asdf dsf"
      onClick={() => {
        ()
      }}
    >
      <span
        id="2-1"
        className="sdf sdfdsf sdfs sdf asdf dsf"
        onClick={() => {
          ()
        }}
      />


      // Comment
      <span
        id="2-2"
        className="sdf sdfdsf sdfs sdf asdf dsf"
        onClick={() => {
          ()
        }}
      />

      <span id="2-3" 
      />
    </span>
    <span
      id="3"
      className="sdf sdfdsf sdfs sdf asdf dsf"
      onClick={() => {
        ()
      }}
    />
  </div>

let moo =
  <div>
    <p> {React.string("moo")} </p>
    // c1
    <p> {React.string("moo")} </p>
    // c2
    // c3
    <p> {React.string("moo")} </p>
    // c4

    <p> {React.string("moo")} </p>
  </div>

let fragmented_moo =
  <>
    <p> {React.string("moo")} </p>
    // c1
    <p> {React.string("moo")} </p>
    // c2
    // c3
    <p> {React.string("moo")} </p>
    // c4

    <p> {React.string("moo")} </p>
  </>

let arrow_with_fragment = el => <>
  {t(nbsp ++ "(")}
  el
  {t(")")}
</>

let arrow_with_container_tag = el => <div>
  {t(nbsp ++ "(")}
  el
  {t(")")}
</div>

<Component
  prop1
  // 
  prop2>
  {React.string("yow")}
</Component>